import React, { useState } from 'react';
import { connect } from 'umi';
import { Form, Modal, Input, Icon, Row, Col, Select } from 'antd';
import QuickForm from '@/components/QuickForm';
import { RadioForm, SelectForm } from '@/components/UserForm';
import { getTypeList, getDict } from '@/services/components/userform';
import { findCountry } from '@/pages/RecruitManage/PositionManage/part/utils';

const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 }
};
const { Option } = Select;

const renderSelect = ({ offerPostType, getFieldDecorator, setpostTypeRemark2, DetailDate }) => {
    const hasData = Object.keys(DetailDate).length > 0;
    if (hasData) {
        return (
            <Col span={12}>
                {getFieldDecorator('postLevel', {
                    initialValue: DetailDate.postType ? DetailDate.postType : '',
                    rules: [
                        // {
                        //     required: true,
                        //     message: '请选择职位'
                        // }
                    ]
                })(
                    <SelectForm
                        params={{ code: offerPostType }}
                        requireParam={['code']}
                        getData={params => {
                            setpostTypeRemark2(null);
                            return getDict(params).then(res => {
                                console.log('第一个接口', res);
                                if (res && res.code === 10000 && res.data) {
                                    console.log('职位', res.data);

                                    // 重置
                                    res.data.forEach(item => {
                                        if (item.dictValue === DetailDate.postType) {
                                            // alert(2);
                                            setpostTypeRemark2(item.remark);
                                        }
                                    });
                                    return res.data || [];
                                }
                                return [];
                            });
                        }}
                        fieldsName={{
                            selectValue: 'dictValue',
                            selectTitle: 'dictName'
                        }}
                        selectProps={{
                            placeholder: '请选择职位',
                            disabled: true,
                            allowClear: true
                        }}
                    />
                )}
            </Col>
        );
    }
    return (
        <Col span={12}>
            <Select disabled>
                <Option value=""></Option>
            </Select>
        </Col>
    );
};

const renderSelect2 = ({ getFieldDecorator, postTypeRemark2, DetailDate }) => {
    if (postTypeRemark2) {
        return (
            <Col span={12}>
                {getFieldDecorator('postLevel2', {
                    initialValue: DetailDate.postLevel ? DetailDate.postLevel : '',
                    rules: [
                        // {
                        //     required: true,
                        //     message: '请选择职级'
                        // }
                    ]
                })(
                    <SelectForm
                        params={{ code: postTypeRemark2 }}
                        requireParam={['code']}
                        getData={params =>
                            getDict(params).then(res => {
                                if (res && res.code === 10000 && res.data) {
                                    return res.data || [];
                                }
                                return [];
                            })
                        }
                        fieldsName={{
                            selectValue: 'dictValue',
                            selectTitle: 'dictName'
                        }}
                        selectProps={{
                            placeholder: '请选择职级',
                            disabled: true,
                            allowClear: true
                        }}
                    />
                )}
            </Col>
        );
    }
    return (
        <Col span={12}>
            <Select disabled>
                <Option value=""></Option>
            </Select>
        </Col>
    );
};

const addConfig = ({ DetailDate, offerPostType, disabled, postTypeRemark2, setpostTypeRemark2, getFieldDecorator }) => {
    if (!DetailDate.recordId) {
        return [];
    }
    // 如果是已取消，则展示取消原因和备注
    if (DetailDate.interviewConclusion === 'cancel') {
        return [
            {
                field: 'cancelReason',
                label: '取消原因',
                key: 'cancelReason',
                props: {
                    ...formItemLayout
                },
                config: {
                    initialValue: DetailDate.cancelReason ? DetailDate.cancelReason : ''
                },
                component: (
                    <SelectForm
                        params={{ code: 'interviewCancelReason' }}
                        requireParam={['code']}
                        getData={params =>
                            getDict(params).then(res => {
                                if (res && res.code === 10000 && res.data) {
                                    return res.data || [];
                                }
                                return [];
                            })
                        }
                        fieldsName={{
                            selectValue: 'dictValue',
                            selectTitle: 'dictName'
                        }}
                        // onChange={this.companyChange}
                        selectProps={{
                            placeholder: '请选择取消原因',
                            style: { minWidth: 200 },
                            disabled: true
                        }}
                    />
                )
            },
            {
                field: 'cancelReasonRemark',
                label: '备注',
                key: 'cancelReasonRemark',
                props: {
                    ...formItemLayout
                },
                config: {
                    initialValue: DetailDate.cancelReasonRemark ? DetailDate.cancelReasonRemark : ''
                },
                component: <Input.TextArea rows={5} placeholder="请输入取消原因的说明，不超过200字符" disabled />
            }
        ];
    }
    // 需求：去掉“候选人定级”字段。但如果是历史的数据，有相关的数据任然要展示候选人定级字段
    const renderPostLevel = (() => {
        if (DetailDate.postLevel || DetailDate.postType) {
            return {
                component: (
                    <Form.Item style={{ marginBottom: 0 }} label="候选人定级" {...formItemLayout}>
                        <Row gutter={8}>
                            {renderSelect({
                                offerPostType,
                                setpostTypeRemark2,
                                getFieldDecorator,
                                DetailDate
                            })}
                            {renderSelect2({
                                postTypeRemark2,
                                getFieldDecorator,
                                DetailDate
                            })}
                        </Row>
                    </Form.Item>
                ),
                config: {
                    initialValue: {
                        offerPostType,
                        postType: DetailDate.postType,
                        postRank: DetailDate.postLevel
                    }
                }
            };
        }
        return undefined;
    })();
    const renderFile = () => {
        if (DetailDate.interviewFile && DetailDate.interviewFile.length > 0) {
            return {
                field: 'fujian',
                label: '附件',
                key: 'fujian',
                props: {
                    ...formItemLayout
                },
                component: (
                    <div>
                        {DetailDate.interviewFile.map(item => (
                            <div key={item.keyName}>
                                <Icon type="paper-clip" />
                                <a
                                    // eslint-disable-next-line react/jsx-no-target-blank
                                    target="_blank"
                                    style={{ marginLeft: 8 }}
                                    href={item.url}
                                    download
                                >
                                    {item.originName}
                                </a>
                            </div>
                        ))}
                    </div>
                )
            };
        }
        return {};
    };
    return [
        {
            field: 'interviewScore',
            label: '面试得分',
            key: 'interviewScore',
            props: {
                ...formItemLayout
            },
            component: <Input disabled={disabled} />,
            config: {
                initialValue: DetailDate.interviewScore !== undefined ? DetailDate.interviewScore : ''
            }
        },
        renderPostLevel,
        {
            field: 'interviewConclusion',
            label: '面试结果',
            key: 'interviewConclusion',
            props: {
                ...formItemLayout
            },
            config: {
                initialValue: DetailDate.interviewConclusion ? DetailDate.interviewConclusion : ''
            },
            component: (
                // <Radio.Group>
                //     <Radio value={1}>通过-重点推荐</Radio>
                //     <Radio value={2}>通过</Radio>
                //     <Radio value={3}>待定</Radio>
                //     <Radio value={4}>淘汰</Radio>
                // </Radio.Group>
                <RadioForm
                    params={{ dictCode: 'interviewConclusionType' }}
                    requireParam={['dictCode']}
                    getData={params =>
                        getTypeList(params).then(res => {
                            if (res && res.code === 10000 && res.data) {
                                const arr = res.data.filter(
                                    item => !['wait_for_beginning', 'cancel'].includes(item.dictValue)
                                );
                                return arr || [];
                            }
                            return [];
                        })
                    }
                    filterItem="待开始"
                    fieldsName={{
                        radioValue: 'dictValue',
                        radioTitle: 'dictName'
                    }}
                    // onChange={this.companyChange}
                    radioProps={{
                        placeholder: '',
                        disabled
                    }}
                />
            )
        },
        {
            field: 'interviewSummary',
            label: '面试总结',
            key: 'interviewSummary',
            props: {
                ...formItemLayout,
                extra: '2 - 2000 个字符'
            },
            config: {
                initialValue: DetailDate.interviewSummary ? DetailDate.interviewSummary : ''
            },
            component: (
                <Input.TextArea
                    style={{ 'word-break': ' break-all' }}
                    placeholder="请输入至少两个字符"
                    disabled={disabled}
                />
            )
        },
        { ...renderFile() }
    ];
};
const ViewDetail = ({ Visible, onOk, onCancel, DetailDate = {}, companyId = '', disabled, form }) => {
    const { getFieldDecorator } = form;
    // postTypeRemark 职位类型的字典 dictCode 前端自己通过companyId获取
    const { offerPostType = 'GroupOfferPostType' } = findCountry(companyId);
    const [postTypeRemark2, setpostTypeRemark2] = useState(null); // 监控职位职级
    return (
        <Modal
            title={`面试结果${DetailDate.interviewConclusion === 'cancel' ? '（已取消）' : ''}`}
            width="750px"
            visible={Visible}
            // confirmLoading={loading}
            onOk={() => {
                onOk();
                form.resetFields();
            }}
            onCancel={() => {
                onCancel();
                form.resetFields();
            }}
        >
            {/* <Spin spinning={loading}> */}
            <Form layout="horizontal">
                <QuickForm
                    config={addConfig({
                        DetailDate,
                        disabled,
                        offerPostType,
                        postTypeRemark2,
                        setpostTypeRemark2,
                        getFieldDecorator
                    })}
                    form={form}
                />
            </Form>
            {/* </Spin> */}
        </Modal>
    );
};
// export default ViewDetail;
export default connect(({ common, loading }) => ({
    common,
    loading
}))(Form.create()(ViewDetail));
